<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>7.11使用JS完成省市二级联动</title>
		
		<script>
			var citys = new Array();
			citys[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
			citys[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
			citys[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
			citys[3] = new Array("郑州市","洛阳市","开封市","安阳市");
			citys[100] = new Array("郑市","洛市","开市","安市");
			
			function changeCity(value){
				alert("citys.length = " + citys.length);
				var select2 = document.getElementById("select2");//只能在函数内赋值,不能在函数外赋值,否则无效
//				select2.options.length = 0;//每次给第二个下拉列表添加数据之前清空数据.
				select2.innerHTML = "";//这样也可以清除第二个下拉列表的数据
//				select2.remove();//直接把select2移除了
				
				for (var i = 0; i < citys[value].length; i ++) {
					var textNode = document.createTextNode(citys[value][i]);
					var optionNode = document.createElement("option");
					optionNode.appendChild(textNode);
					select2.appendChild(optionNode);
				}
			}
		</script>
	</head>

	<body>
		<table width="100%">
			<tr>
				<td>
					<table width="100%">
						<tr>
							<td>&emsp;<img src="../img/logo2.png" alt="logo" />
								<td align="center"><img src="../img/header.png" /> </td>
								<td>
									<table>
										<tr align="center">
											<td>
												<a href="">登录</a>
											</td>
											<td>
												<a href="">注册</a>
											</td>
											<td>
												<a href="">购物车</a>
											</td>
										</tr>
									</table>
								</td>
						</tr>
					</table>
					</td>
			</tr>

			<tr>
				<td>
					<table width="100%" height="50px" bgcolor="#444443">
						<tr>
							<td>
								<table width="33.3%">
									<tr>
										<td>&emsp;首页</td>
										<td>手机数码</td>
										<td>电脑办公</td>
										<td>航天飞机</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>

			<tr>
				<td height="600px" background="../img/regist_bg.jpg">
					<form action="This-is-form's-action-by-Actor" method="get" name="registerForm">
						<table bgcolor="white" border="1px" cellpadding="0px" cellspacing="0px" width="50%" height="100%" align="center">
							<tr>
								<td colspan="2">
									<font size="5">会员注册</font>&emsp;USER REGISTER
								</td>
							</tr>

							<tr>
								<td>用户名</td>
								<td><input type="text" size="35px" name="username" placeholder="请输入用户名"></input>
								</td>
							</tr>

							<tr>
								<td>密码</td>
								<td><input type="password" size="35px" name="password" placeholder="请输入密码"></input>
								</td>
							</tr>

							<tr>
								<td>确认密码</td>
								<td><input type="password" size="35px" name="repassword" placeholder="请再次输入密码"></input>
								</td>
							</tr>

							<tr>
								<td>Email</td>
								<td><input type="email" size="35px" name="email" placeholder="请输入Email"></input>
								</td>
							</tr>

							<tr>
								<td>姓名</td>
								<td><input type="text" size="35px" name="name" placeholder="请输入姓名"></input>
								</td>
							</tr>

							<tr>
								<td>籍贯</td>
								<td>
									<select id="select1" onchange="changeCity(this.value)">
										<option>--请选择--</option>
										<option value="0">湖北</option>
										<option value="1">湖南</option>
										<option value="2">河北</option>
										<option value="3">河南</option>
										<option value="100">测试value=100</option>
									</select>
									<select id="select2">
									</select>
								</td>
							</tr>

							<tr>
								<td>性别</td>
								<td><input type="radio" name="sex" value="1" checked="checked"></input>男
									<input type="radio" name="sex" value="2"></input>女</td>
							</tr>

							<tr>
								<td>出生日期</td>
								<td><input type="date" size="35px" name="birthday"></input>
								</td>
							</tr>

							<tr>
								<td>验证码</td>
								<td><input type="text" name="yanzhengma" placeholder="请输入验证码"></input>
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>

							<tr>
								<td></td>
								<td><input type="submit" value="提交" /> </td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
		</table>

		<tr>
			<td>
				<img width="100%" src="../img/footer.jpg" />
			</td>
		</tr>

		<tr>
			<td>
				<table align="center">
					<tr>
						<td>
							<a href="">关于我们</a>
						</td>
						<td>&ensp;
							<a href="">联系我们</a>
						</td>
						<td>&ensp;
							<a href="">招贤纳士</a>
						</td>
						<td>&ensp;
							<a href="">法律声明</a>
						</td>
						<td>&ensp;
							<a href="">友情链接</a>
						</td>
						<td>&ensp;
							<a href="">支付方式</a>
						</td>
						<td>&ensp;
							<a href="">配送方式</a>
						</td>
						<td>&ensp;
							<a href="">服务声明</a>
						</td>
						<td>&ensp;
							<a href="">广告声明</a>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		
		<xmp>
			<td>
				<select id="select1" onchange="changeCity(this.value)">
					<option>--请选择--</option>
					<option value="0">湖北</option>
					<option value="1">湖南</option>
					<option value="2">河北</option>
					<option value="3">河南</option>
					<option value="100">测试value=100</option>
				</select>
				<select id="select2">
				</select>
			</td>
			
			
			<script>
				var citys = new Array();
				citys[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
				citys[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
				citys[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
				citys[3] = new Array("郑州市","洛阳市","开封市","安阳市");
				citys[100] = new Array("郑市","洛市","开市","安市");
				
				function changeCity(value){
					alert("citys.length = " + citys.length);
					var select2 = document.getElementById("select2");//只能在函数内赋值,不能在函数外赋值,否则无效
	//				select2.options.length = 0;//每次给第二个下拉列表添加数据之前清空数据.
					select2.innerHTML = "";//这样也可以清除第二个下拉列表的数据
	//				select2.remove();//直接把select2移除了
					
					for (var i = 0; i < citys[value].length; i ++) {
						var textNode = document.createTextNode(citys[value][i]);
						var optionNode = document.createElement("option");
						optionNode.appendChild(textNode);
						select2.appendChild(optionNode);
					}
				}
			</script>
		</xmp>
	</body>

</html>